<!--
 * @Author: tian_biao
 * @Date: 2021-08-13 15:53:06
 * @LastEditTime: 2021-08-26 16:33:01
 * @Description: 开始准备
-->
<template>
    <article class="bg_4dbfae">
        <!-- 标题-->
        <div class="title-bg">
            <Theader :title="title" :headerStyle="{color:'#333'}" :textStyle="{color:'#333'}"
                :titleStyle="{color:'#333'}">
                <template slot="header_arrow">
                    <van-icon size="17" name="arrow-left"  @click="back"/>
                </template>
            </Theader>
        </div>
        <div class="sussessBox">
            <div class="curren">当前巡视任务</div>
            <div class="defectItem borderNone">
                <div class="rightPart">
                    <div class="timePartTop">
                        <div class="fristBox">
                            <div>
                                <div class="defectXz textColorYb">「待准备」</div>
                                <div class="title">新华园山变电站全面巡视</div>
                            </div>
                        </div>
                        <div class="fristBox">
                            <div>
                                <div>交花园山变电 交流110kv</div>
                            </div>
                        </div>
                        <div class="box">
                            <van-image width="0.8rem" height="0.8rem" :src="icon.tourUser" />
                            <div class="ml05rem">巡视人：</div>
                            <div class="textShow">刘晓东迟长兴</div>
                        </div>
                        <div class="box">
                            <van-image width="0.8rem" height="0.8rem" :src="icon.tourTime" />
                            <div class="tourTime ml05rem">巡视计划时间：</div>
                            <div class="textShow">2021/06/13 11:30</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="interval">可以使用一下工作任务协同开展</div> -->
        <div class="interval">
            <van-image width="4rem" height="0.2rem" :src="icon.left" />
            <div>可以使用一下工作任务协同开展</div>
            <van-image width="4rem" height="0.2rem" :src="icon.right" />
        </div>

        <div class="tjList">
            <h4>巡视任务</h4>
            <div class="defectItem" v-for="(item,index) in referrerList">
                <div class="rightPart">
                    <div class="timePart">
                        <div class="fristBox">
                            <div>
                                <div class="defectXz textColorYb">「{{item.state}}」</div>
                                <div class="title">{{item.tourName}}</div>
                            </div>
                        </div>
                        <div class="fristBox">
                            <div>
                                <div>{{item.level}}</div>
                            </div>
                        </div>
                        <div class="box">
                            <van-image width="0.8rem" height="0.8rem" :src="icon.tourUser" />
                            <div class="ml05rem">巡视人：</div>
                            <div class="textShow">{{item.tourUser}}</div>
                        </div>
                        <div class="box">
                            <van-image width="0.8rem" height="0.8rem" :src="icon.tourTime" />
                            <div class="tourTime ml05rem">巡视计划时间：</div>
                            <div class="textShow">{{item.tourTime}}</div>
                        </div>
                    </div>
                </div>
                <van-checkbox class="pos" @change="selectItem" checked-color="#0EB295" v-model="item.checked"
                    icon-size="1.5rem"></van-checkbox>
            </div>
            <h4>运维计划</h4>
            <div class="defectItem" v-for="(item,index) in referrerList">
                <div class="rightPart">
                    <div class="timePart">
                        <div class="fristBox">
                            <div>
                                <div class="defectXz textColorYb">「{{item.state}}」</div>
                                <div class="title">{{item.tourName}}</div>
                            </div>
                        </div>
                        <div class="fristBox">
                            <div>
                                <div>{{item.level}}</div>
                            </div>
                        </div>
                        <div class="box">
                            <van-image width="0.8rem" height="0.8rem" :src="icon.tourUser" />
                            <div class="ml05rem">巡视人：</div>
                            <div class="textShow">{{item.tourUser}}</div>
                        </div>
                        <div class="box">
                            <van-image width="0.8rem" height="0.8rem" :src="icon.tourTime" />
                            <div class="tourTime ml05rem">巡视计划时间：</div>
                            <div class="textShow">{{item.tourTime}}</div>
                        </div>
                    </div>
                </div>
                <van-checkbox class="pos" @change="selectItem" checked-color="#0EB295" v-model="item.checked"
                    icon-size="1.5rem"></van-checkbox>
            </div>
        </div>
        <div class="jdBtnBox">
            <div class="jdBtnBoxSon">
                <div class="selectAll" @click="selectAll">
                    <van-checkbox checked-color="#0EB295" v-model="checked" icon-size="1.5rem"></van-checkbox>
                    <div class="selectAllText">全选</div>
                </div>
                <div class="jdText" @click="overReady">立即开展巡视准备</div>
            </div>
        </div>
    </article>
</template>

<script type="text/javascript">
    import Theader from "../component/header"
    import Utils from '@/utils/util'
    export default {
        name: 'scheduling',
        components: {
            Theader,
        },
        data() {
            return {
                icon: {
                    tourUser: require('../../images/image087-tour.png'),
                    tourTime: require('../../images/image087-tourTime.png'),
                    left: require('../../images/left.png'),
                    right: require('../../images/right.png'),
                },
                title: "关联任务",
                checked: false,
                // 推荐列表
                referrerList: [
                    {
                        state: "待安排",
                        tourName: "花园山变电站熄灯巡视",
                        level: "交花园山变电 交流110kv",
                        tourUser: "宋云飞",
                        tourTime: "2021/06/13 11:30",
                        checked: false,
                    },
                    {
                        state: "待安排",
                        tourName: "花园山变电站熄灯巡视",
                        level: "交花园山变电 交流110kv",
                        tourUser: "宋云飞",
                        tourTime: "2021/06/13 11:30",
                        checked: false,
                    },
                    {
                        state: "待安排",
                        tourName: "花园山变电站熄灯巡视",
                        level: "交花园山变电 交流110kv",
                        tourUser: "宋云飞",
                        tourTime: "2021/06/13 11:30",
                        checked: false,
                    },
                ],
            }
        },

        computed: {

        },

        methods: {
            
            back(){
                this.$router.go(-1)
            },
            /**
             * @description: 单选
             * @param {*}
             * @return {*}
             */
            selectItem() {
                var num = 0
                for (let i = 0; i < this.referrerList.length; i++) {
                    if (this.referrerList[i].checked) {
                        num++
                    }
                }
                if (num == this.referrerList.length) {
                    this.checked = true
                } else {
                    this.checked = false
                }
            },
            /**
             * @description: 全选
             * @param {*}
             * @return {*}
             */
            selectAll() {
                this.checked = !this.checked
                if (this.checked) {
                    this.referrerList.forEach(v => {
                        v.checked = true
                    });
                } else {
                    this.referrerList.forEach(v => {
                        v.checked = false
                    });
                }
            },
            
            overReady(){
                this.$router.push({
                    name: "overReady",
                    query: {
                        params: ""
                    }
                })
            }
        },

        watch: {
        },
        mounted() {
            // this.$toast.success('接单成功！');
        },
        created() {
        },

    }
</script>

<style scoped>
    article {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .bg_4dbfae {
        background: #f5f6fa !important;
    }

    .title-bg {
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }

    .sussessBox {
        width: 95%;
        margin: 0 auto;
        height: 10rem;
        margin-top: 1rem;
        border-radius: 12px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
    }

    .curren {
        position: absolute;
        left: 3%;
        top: 6%;
        font-size: 1rem;
        z-index: 1;
        font-weight: 600;
    }

    .timePartTop {
        margin-top: 1.5rem;
    }

    .sussecc {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sussecc>div {
        font-size: 1.5rem;
        margin-left: 0.5rem;
    }

    .startTourReady {
        width: 38%;
        height: 2.5rem;
        line-height: 2.5rem;
        margin-top: 1.5rem;
        font-size: 1rem;
        border-radius: 25px;
        text-align: center;
        color: #0EB295;
        border: 1px solid #0EB295;
    }

    .interval {
        width: 100%;
        text-align: center;
        margin-top: 1.5rem;
        font-size: 14px;
        color: #ccc;
        display: flex;
        align-items: center;
        justify-content: space-around;
        
    }

    .tjList {
    width: 95%;
    height: calc(100% - 22rem);
    overflow-y: auto;
    margin: 0 auto;
    margin-top: 0.5rem;
}

    /* h4{
        width: 95%;
        margin: 0 auto;
    } */

    .defectItem {
        margin-bottom: 10px;
        padding: 15px;
        color: #8f8f94;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        border-radius: 4px;
        background: #FFFFFF;
        box-shadow: 0px 0px 1px 0px #ccc;
        position: relative;
        overflow: hidden;

    }

    .borderNone {
        box-shadow: none;
    }

    .pos {
        position: absolute;
        top: 14%;
        right: 4%;
    }

    .defectItem .rightPart {
        width: 100%;
    }

    .fristBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.5rem;
    }

    .fristBox>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .defectXz{
    /* color: #0EB295; */
    font-family: Source Han Sans CN;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0px;
    text-align: right;
    margin-left: -0.5rem;
    width: 75px;
}

    .textColorYb {
        color: #0EB295;
    }

    .title{
    font-style: 2rem;
    font-weight: 600;
    color: black;
    width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .box {
        display: flex;
        margin-top: 0.5rem;
        align-items: center;
        color: #333;
    }

    .textShow {
        width: 35%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tourTime {
        min-width: 110px;
    }

    .jdBtnBox {
        width: 100%;
        height: 3rem;
        background-color: #fff;
        position: absolute;
        bottom: 0;
    }

    .jdBtnBoxSon {
        width: 95%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .selectAll {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .selectAllText {
        margin-left: 1rem;
    }

    .jdText {
        flex: 0.6;
        height: 3rem;
        background-color: #0EB295;
        color: #FFFFFF;
        line-height: 3rem;
        text-align: center;
        border-radius: 4px;
    }
    .ml05rem {
        margin-left: 0.5rem;
    }

</style>